<!DOCTYPE html>
<!--
TODO implement pausing game
TODO implement stopping/quitting game
TODO add sound
TODO explore css sprites to reduce loading time
TODO translate in French
TODO upload to website (Tony's or Sainte-Anne?)
todo add background image at the end
todo add "you win" or "you lose!"
todo ask confirm to quit
todo add score
todo add second level
todo save high score with html storage
-->
<html>

<head> 

  <meta charset=utf-8>
  <title>Canvas Tutorial -  Introduction</title>

  <script src="../js/edit_area/edit_area_full.js"></script>
  <script src="../js/jquery-1.5.1.min.js"></script>
  <script src="../js/jquery-ui-1.8.13.custom.min.js"></script>
  <link rel="stylesheet" href="../css/jquery-ui.css" media="screen">
  <link rel="stylesheet" href="../css/custom.css">

  <script>
    // This code is meant to be automatically included in our template.

var editor = undefined;
var libEditor = undefined;
var intervalID = undefined;
var running = false;
var paused = false;
var speaker_on = false;
var user_response;

// hover states on the static widgets
$(function(){
  $('#dialog_link, ul#icons li').hover(
    function() { $(this).addClass('ui-state-hover'); }, 
    function() { $(this).removeClass('ui-state-hover'); }
  );
});

// play button controls
$(function(){
  $("#play").hover(
    function () {
      if ($(this).find("img").attr("src") == "../images/black_play.png") {
        $(this).find("img").attr({src:"../images/orange_play.png"});
      }
    }, 
    function () {
      if ($(this).find("img").attr("src") == "../images/orange_play.png") {
        $(this).find("img").attr({src:"../images/black_play.png"});
      }
    }
  );
});

$(function(){
  $("#play").click(
    function () {
      if ($(this).find("img").attr("src") == "../images/orange_play.png") {
        $(this).find("img").attr({src:"../images/green_play.png"});
        $("#stop").find("img").attr({src:"../images/black_stop.png"});
        running = true;
        runCode();
        return false;
      }
      if (paused){
        paused = false;
        $("#pause").find("img").attr({src:"../images/black_pause.png"});
      }
    }
  );
});

// pause button controls
$(function(){
  $("#pause").hover(
    function () {
      if (running) {
        if ($(this).find("img").attr("src") == "../images/black_pause.png") {
          $(this).find("img").attr({src:"../images/orange_pause.png"});
        }
      }
    }, 
    function () {
      if ($(this).find("img").attr("src") == "../images/orange_pause.png") {
        $(this).find("img").attr({src:"../images/black_pause.png"});
      }
    }
  );
});

$(function(){
  $("#pause").click(
    function () {
      if ($(this).find("img").attr("src") == "../images/orange_pause.png") {
        $(this).find("img").attr({src:"../images/green_pause.png"});
        paused = true;
      }
      else{
        paused = false;
        $(this).find("img").attr({src:"../images/black_pause.png"});
      }
      return false;
    }
  );
});

// stop button controls
$(function(){
  $("#stop").hover(
    function () {
      if (running) {
        if ($(this).find("img").attr("src") == "../images/black_stop.png") {
          $(this).find("img").attr({src:"../images/orange_stop.png"});
        }
      }
    }, 
    function () {
      if ($(this).find("img").attr("src") == "../images/orange_stop.png") {
        $(this).find("img").attr({src:"../images/black_stop.png"});
      }
    }
  );
});

function update_buttons_after_stop(){
  // to be called by user in their own code as well as here.
  $("#play").find("img").attr({src:"../images/black_play.png"});
  $("#pause").find("img").attr({src:"../images/black_pause.png"});
  $("#stop").find("img").attr({src:"../images/red_stop.png"});
}

$(function(){
  $("#stop").click(
    function () {
      if (running) {
        if ($(this).find("img").attr("src") == "../images/orange_stop.png") {
          update_buttons_after_stop();
          clearInterval(intervalID);
          running = false;
          paused = false;
        }
        return false;
      }
    }
  );
});


// sound button controls
$(function(){
  $("#sound").hover(
    function () {
      if (speaker_on){
        $(this).find("img").attr({src:"../images/orange_speaker_on.png"});
      }
      else {
        $(this).find("img").attr({src:"../images/orange_speaker.png"});
      }
    }, 
    function () {
      if (speaker_on) {
        $(this).find("img").attr({src:"../images/green_speaker_on.png"});
      }
      else {
        $(this).find("img").attr({src:"../images/black_speaker.png"});
      }
    }
  );
});

$(function(){
  $("#sound").click(
    function () {
      if (speaker_on) {
        $(this).find("img").attr({src:"../images/black_speaker.png"});
        speaker_on = false;
      }
      else {
        $(this).find("img").attr({src:"../images/green_speaker_on.png"});
        speaker_on = true;
      }
    }
  );
});

// next link controls
$(function(){
  $(".nextLink").hover(
    function () {
      if ($(this).find("img").attr("src") == "../images/black_forward.png") {
        $(this).find("img").attr({src:"../images/orange_forward.png"});
      }
    }, 
    function () {
      if ($(this).find("img").attr("src") == "../images/orange_forward.png") {
        $(this).find("img").attr({src:"../images/black_forward.png"});
      }
    }
  );
});

// previous link controls
$(function(){
  $(".prevLink").hover(
    function () {
      if ($(this).find("img").attr("src") == "../images/black_back.png") {
        $(this).find("img").attr({src:"../images/orange_back.png"});
      }
    }, 
    function () {
      if ($(this).find("img").attr("src") == "../images/orange_back.png") {
        $(this).find("img").attr({src:"../images/black_back.png"});
      }
    }
  );
});



function runCode() {
    if (intervalID != undefined)
        clearInterval(intervalID);
    $("#canvas")[0].getContext("2d").clearRect(0,0,
      $("#canvas")[0].width,
      $("#canvas")[0].height);

    //if there's a library defined, eval it
    if (libEditor != undefined) {
        eval(editAreaLoader.getValue("library"));
    }
        intervalID = eval($("#hidden_code").val());
};

$(document).ready(function(){
    

    var $tabs = $('#textcontainer').tabs();
        $tabs.tabs("remove", 2);
    $tabs.tabs("select", 1);  // tab 0 is the table of contents
});
  </script>

 </head>

  <body>
       <textarea id="hidden_code" style="display:none">
    var x = 25;
    var y = 250;
    var dx = 1.5;
    var dy = -4;
    var ctx;
    var WIDTH;
    var HEIGHT;
    var paddlex;
    var paddleh = 10;
    var paddlew = 75;
    var rightDown = false;
    var leftDown = false;
    var canvasMinX = 0;
    var canvasMaxX = 0;
    var intervalId = 0;
    var bricks;
    var NROWS = 5;
    var NCOLS = 5;
    var BRICKWIDTH;
    var BRICKHEIGHT = 15;
    var PADDING = 1;

    var isPlaying = true;
    var background_image = new Image();
    background_image.src = '../images/earth.jpg';

function playBeat(sound_id) {
  if (isPlaying !== false) {

    var tmpAudio;

      tmpAudio = document.getElementById(sound_id);
      if (!tmpAudio.paused) {
        // Pause and reset it
        tmpAudio.pause();
        tmpAudio.currentTime = 0.0;
      }
      tmpAudio.play();
  };
}


    function init() {
      ctx = $('#canvas')[0].getContext("2d");
      WIDTH = $("#canvas").width();
      HEIGHT = $("#canvas").height();
      BRICKWIDTH = (WIDTH/NCOLS) - 1;
      paddlex = WIDTH / 2;
      canvasMinX = $("#canvas").offset().left;
      canvasMaxX = canvasMinX + WIDTH;
      intervalId = setInterval(draw, 10);
      return intervalId;
    }

    function circle(x,y,r) {
      ctx.beginPath();
      ctx.arc(x, y, r, 0, Math.PI*2, true);
      ctx.closePath();
      ctx.fill();
    }

    function rect(x,y,w,h) {
      ctx.beginPath();
      ctx.rect(x,y,w,h);
      ctx.closePath();
      ctx.fill();
    }

    function clear() {
      ctx.clearRect(0, 0, WIDTH, HEIGHT);
      rect(0,0,WIDTH,HEIGHT);
    }

    function onKeyDown(evt) {
      if (evt.keyCode == 39) rightDown = true;
      else if (evt.keyCode == 37) leftDown = true;
    }

    function onKeyUp(evt) {
      if (evt.keyCode == 39) rightDown = false;
      else if (evt.keyCode == 37) leftDown = false;
    }

    $(document).keydown(onKeyDown);
    $(document).keyup(onKeyUp);

    function onMouseMove(evt) {
      if (evt.pageX &gt; canvasMinX &amp;&amp; evt.pageX &lt; canvasMaxX) {
        paddlex = Math.max(evt.pageX - canvasMinX - (paddlew/2), 0);
        paddlex = Math.min(WIDTH - paddlew, paddlex);
      }
    }

    $(document).mousemove(onMouseMove);

    function initbricks() {
        bricks = new Array(NROWS);
        for (i=0; i &lt; NROWS; i++) {
            bricks[i] = new Array(NCOLS);
            for (j=0; j &lt; NCOLS; j++) {
                bricks[i][j] = 1;
            }
        }
    }

    function drawbricks() {
      for (i=0; i &lt; NROWS; i++) {
        ctx.fillStyle = rowcolors[i];
        for (j=0; j &lt; NCOLS; j++) {
          if (bricks[i][j] == 1) {
            rect((j * (BRICKWIDTH + PADDING)) + PADDING, 
                 (i * (BRICKHEIGHT + PADDING)) + PADDING,
                 BRICKWIDTH, BRICKHEIGHT);
          }
        }
      }
    }

    var ballr = 10;
    var rowcolors = ["#FF1C0A", "#FFFD0A", "#00A308", "#0008DB", "#EB0093"];
    var paddlecolor = "#FFFFFF";
    var ballcolor = "#FFFFFF";
    var backcolor = "#000000";

    function draw() {
      ctx.fillStyle = backcolor;
      clear();
      ctx.drawImage(background_image,0,0);
      ctx.fillStyle = ballcolor;
      circle(x, y, ballr);

      if (rightDown) paddlex += 5;
      else if (leftDown) paddlex -= 5;
      ctx.fillStyle = paddlecolor;
      rect(paddlex, HEIGHT-paddleh, paddlew, paddleh);

      drawbricks();

      //want to learn about real collision detection? go read
      // http://www.harveycartel.org/metanet/tutorials/tutorialA.html
      rowheight = BRICKHEIGHT + PADDING;
      colwidth = BRICKWIDTH + PADDING;
      row = Math.floor(y/rowheight);
      col = Math.floor(x/colwidth);
      //reverse the ball and mark the brick as broken
      if (y &lt; NROWS * rowheight &amp;&amp; row &gt;= 0 &amp;&amp; col &gt;= 0 &amp;&amp; bricks[row][col] == 1) {
        dy = -dy;
        bricks[row][col] = 0;
        playBeat("brick_sound");
      }
     
      if (x + dx + ballr &gt; WIDTH || x + dx - ballr &lt; 0) {
        dx = -dx;
        playBeat("wall_sound");
        }
      
      if (y + dy - ballr &lt; 0)
        dy = -dy;
      else if (y + dy + ballr &gt; HEIGHT - paddleh) {
        if (x &gt; paddlex &amp;&amp; x &lt; paddlex + paddlew) {
          //move the ball differently based on where it hit the paddle
          dx = 8 * ((x-(paddlex+paddlew/2))/paddlew);
          dy = -dy;
          playBeat("paddle_sound");
        }
        else if (y + dy + ballr &gt; HEIGHT)
          clearInterval(intervalId);
      }
     
      x += dx;
      y += dy;
    }

    init();
    initbricks();
  </textarea>



    <div id="header">
     <h1>Canvas Tutorial: Breakout!</h1>
    </div>


    <audio id="paddle_sound" preload>
      <source src="../sounds/kick11.wav" type="audio/x-wav">
      <source src="../sounds/kick11.ogg" type="application/ogg">
      <source src="../sounds/kick11.mp3" type="audio/mpeg">
    </audio> 

    <audio id="brick_sound" preload>
      <source src="../sounds/snare01.wav" type="audio/x-wav">
      <source src="../sounds/snare01.ogg" type="application/ogg">
      <source src="../sounds/snare01.mp3" type="audio/mpeg">
    </audio> 

    <audio id="wall_sound" preload>
      <source src="../sounds/kick6.wav" type="audio/x-wav">
      <source src="../sounds/kick6.ogg" type="application/ogg">
      <source src="../sounds/kick6.mp3" type="audio/mpeg">
    </audio> 

    <div id="canvascontainer">
         <canvas id="canvas" width="300" height="300"></canvas>
         <div id="controlIcons" style="text-align:center">
          <a id="play" href="#">
            <img src="../images/black_play.png" 
                 alt="run code" style="height:64px; border:none;"/>
          </a>
            <a id="pause" href="#">
            <img src="../images/black_pause.png" 
                 alt="pause" style="height:64px; border:none;"/>
          </a>
            <a id="stop" href="#">
            <img src="../images/black_stop.png" 
                 alt="stop" style="height:64px; border:none;"/>
          </a>
            <a id="sound" href="#">
            <img src="../images/black_speaker.png" 
                 alt="sound" style="height:64px; border:none;"/>
          </a>
             <!--<img class="runCode" src="../images/black_play.png" height="64px" onClick="runCode();"/> -->
         </div>
    </div>

    <div id="textcontainer">
      <h1 id="title">
         Introduction
            <a href="ball.html" class="nextLink">
              <img src="../images/black_forward.png" 
               alt="next page" style="width:64px; border:none;"/>
            </a>
      </h1>
      
      <ul>
          <li class="ui-tabs-nav-item"><a href="#toc"><span>Contents</span></a></li>
          <li class="ui-tabs-nav-item"><a href="#explain"><span>Code</span></a></li>
          <li class="ui-tabs-nav-item"><a href="#libraryContainer"><span>Library</span></a></li>
          <li class="ui-tabs-nav-item"><a href="#comments"><span>Comments</span></a></li>
      </ul>

      <div id="toc">
        <ol>
               <li><a href="index.html"> Introduction</a></li>
               <li><a href="ball.html">Draw a Circle</a></li>
               <li><a href="colour.html">Add Some Colour</a></li>
               <li><a href="move.html">Action</a></li>
               <li><a href="library_.html">Library: an Interlude</a></li>
               <li><a href="bounce.html">Bounce!</a></li>
               <li><a href="sound.html">Sound</a></li>
               <li><a href="mute.html">Mute</a></li>
               <li><a href="paddle.html">Add a Paddle</a></li>
               <li><a href="keyboard.html">The Keyboard</a></li>
               <li><a href="mouse.html">The Mouse</a></li>
               <li><a href="bricks.html">The Bricks</a></li>
               <li><a href="finish.html">Finishing Touches</a></li>
               <li><a href="resources.html">Resources</a></li>
               <li><a href="test.html"> Introduction</a></li>
         </ol>
      </div>

      <div id="explain">
    <p>Welcome! In this tutorial, which is an expanded version of an
      <a href="http://billmill.org/static/canvastutorial/index.html">
      original tutorial by Bill Mill</a>, we're going to create a breakout
    clone that you can play in your browser, using javascript and 
    the html <code>&lt;canvas&gt;</code> element.  In addition to covering many
    features of the html canvas, we will also see how to incorporate sound and
    saving scores using new features introduced by html5.</p>
    <p>In order to use this tutorial, you'll need to have a relatively recent 
      version of a modern browser; if you are using Internet Explorer, some
      (or all, depending on the version) of the features we will introduce
      may not work.</p>

    <p>Before you read any further, click on the 
    <img src="../images/black_play.png" style="height:64px;" /> 
    button, also known as the "run code" button, 
    on the left to play the game that we'll end up creating.  You may also
    experiment by clicking on the other control buttons that are provided.
    </p>

    <p>On every page, you'll be able to click the "run code" button to run the code
    we've developed so far. Most pages have an editor in it containing
    the javascript code that will be run in the same box as the game as soon as you
    click the button. You can make changes to the code, and see the results
    instantly by clicking the "run code" button. <b>Please note: </b> you can
    change the size of the editor by 1) clicking on the bottom right corner,
    2) letting go of the mouse button (i.e. no click-drag) 3) [you should
    now see an outline of the editor] move the mouse to get the editor the
    size you want, 4) click again.</p>
    <p>In order to make our lives easier, I've included the 
      <a href="http://jquery.com">jQuery</a> framework in every page, which extends
    javascript in your browser with some useful methods.</p>
    <p>If you have any comments or questions, feel free to leave a comment on the
    "comments" tab.</p>
  

          
          
              <a href="ball.html" class="nextLink">
                <img src="../images/black_forward.png" 
                 alt="next page" style="height:64px; border:none;"/>
              </a>
          </br> <!-- leave room for next link image on first page -->
          <p style="font-size: 6px; color: gray;">Tutorial by Andr&eacute; Roberge</p>
      </div>
     
      <div id="libraryContainer">
      </div>

      <div id="comments">
      Nothing here yet
      </div>
    </div>

  </body>
</html>
